<template>
  <!-- 搜索框 -->
  <van-search v-model="value"
              placeholder="搜索"
              @search="onSearch"
              clearable />
</template>

<script>
import { ref } from 'vue'
export default {
  setup (props, { emit }) {
    const value = ref(null)
    const onSearch = () => {
      emit('doSearch', value.value)
    }
    return {
      value,
      onSearch
    }
  }
}
</script>

<style scoped>
/* 搜索 */
::v-deep(.van-search__field .van-field__left-icon i) {
  font-weight: bold;
}
::v-deep(.van-search__content) {
  border-radius: 4px;
}
::v-deep(.van-search) {
  padding: 6px 15px;
}
</style>
